import React, { ReactElement, useContext, useEffect, useState } from 'react';
import { View } from 'react-native';

import Provider from './reducer';
import { Store } from '../../reducer';

import styles from './style';
import { TabId } from '../../constant';
import Container from './components/Container';
import { getCourseList } from './actions';
import { getUserLessonResourceIds } from '../../actions';

export default (): ReactElement => {
  const [show, setShow] = useState(false);
  const { state } = useContext(Store);
  const { currentTab } = state;

  useEffect((): void => {
    if (currentTab.id === TabId.Course) {
      if (!currentTab.hasShow) {
        // 初始化操作
        setShow(true);
      }
      getCourseList();
      getUserLessonResourceIds();
    }
  }, [currentTab.hasShow, currentTab.id]);

  if (!show) return <View style={styles.container} />;

  return (
    <Provider>
      <View style={styles.container}>
        <Container />
      </View>
    </Provider>
  );
};
